<template>
  <div class="weapon-page">
    <!-- 页面头部区域：包含页面标题和操作按钮 -->
    <div class="page-header">
      <!-- 页面标题区域：左侧显示页面主要信息 -->
      <div class="header-left">
        <h1 class="page-title">武器展示</h1>
        <p class="page-subtitle">浏览和查看所有武器信息</p>
      </div>
      
      <!-- 页面操作区域：右侧显示主要功能按钮 -->
      <div class="header-actions">
        <!-- 数据刷新按钮：重新加载武器和英雄数据 -->
        <button class="refresh-btn" @click="loadData" :disabled="loading">
          <span class="refresh-icon">🔄</span>
          {{ loading ? '刷新中...' : '刷新数据' }}
        </button>
      </div>
    </div>
      
    <!-- 数据加载状态显示区域：当数据正在加载时显示加载动画 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    
    <!-- 错误状态显示区域：当数据加载失败时显示错误信息和重试按钮 -->
    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="loadData" class="retry-btn">重试</button>
    </div>

    <!-- 主要内容区域：包含搜索筛选和武器展示 -->
    <div v-else class="main-content">
      <!-- 搜索和筛选功能区域：提供武器名称搜索和英雄筛选功能 -->
      <div class="search-section">
        <div class="search-container">
          <!-- 搜索输入框包装容器：包含搜索输入框和搜索图标 -->
          <div class="search-input-wrapper">
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索武器名称..." 
              class="search-input" 
              @input="handleSearch" 
            />
            <!-- 搜索图标：放大镜图标提供视觉提示 -->
            <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        
          <!-- 英雄筛选功能区域：根据英雄筛选武器 -->
          <div class="hero-filter-wrapper">
            <select v-model="selectedHero" @change="handleHeroFilter" class="hero-filter">
              <option value="">所有英雄</option>
              <option 
                v-for="hero in heroList"  
                :key="hero.id" 
                :value="hero.id" 
              >
                {{ hero.heroName }}
             </option>
           </select>
         </div>
        </div>
      </div>

      <!-- 武器数据展示主区域：显示武器网格或空状态 -->
      <div class="weapons-container">
        <!-- 武器网格布局：有数据时显示武器卡片列表 -->
        <div class="weapons-grid" v-if="filteredWeapons.length > 0">
          <div 
            v-for="weapon in filteredWeapons" 
            :key="weapon.weaponId" 
            class="weapon-card" 
            @click="selectWeapon(weapon)" 
            :class="{ active: selectedWeapon?.weaponId === weapon.weaponId }" 
          >
            <!-- 武器图片区域：显示武器图片，支持错误处理 -->
            <div class="weapon-image">
              <img 
                :src="weapon.weaponSkillUrl || '/default-weapon.png'" 
                :alt="weapon.weaponName" 
                @error="handleImageError" 
              />
            </div>
            <!-- 武器基本信息区域：显示武器名称和适用英雄 -->
            <div class="weapon-info">
              <h3 class="weapon-name">{{ weapon.weaponName }}</h3>
              <!-- 适用英雄信息：仅当英雄名称存在时显示 -->
              <div class="weapon-hero" v-if="getHeroName(weapon.heroId)">
                <span class="hero-label">适用英雄:</span>
                <span class="hero-name">{{ getHeroName(weapon.heroId) }}</span>
              </div>
            </div>
          </div>
        </div>
      
        <!-- 空状态提示：无数据时显示提示信息和图标 -->
        <div v-else class="no-weapons">
          <!-- 空状态图标：层叠盒子图标表示空的数据状态 -->
          <div class="no-weapons-icon">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>暂无武器数据</h3>
          <!-- 空状态描述：根据搜索状态显示不同提示 -->
          <p>{{ searchQuery ? '没有找到匹配的武器' : '还没有添加任何武器' }}</p>
        </div>
      </div>
    </div>

    <!-- 武器详情侧边栏：显示选中武器的详细信息 -->
    <div class="weapon-detail-sidebar" :class="{ active: selectedWeapon }">
      <!-- 武器详情内容：仅当有选中武器时显示 -->
      <div v-if="selectedWeapon" class="weapon-detail">
        <!-- 详情头部：武器名称和关闭按钮 -->
        <div class="detail-header">
          <h2>{{ selectedWeapon.weaponName }}</h2>
          <!-- 关闭详情按钮：点击关闭侧边栏 -->
          <button class="close-detail" @click="closeDetail">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        
        <!-- 详情主要内容区域：包含武器图片、属性和描述 -->
        <div class="detail-content">
          <!-- 武器大图展示：显示武器的大尺寸图片 -->
          <div class="weapon-image-large">
            <img 
              :src="selectedWeapon.weaponSkillUrl || '/default-weapon.png'" 
              :alt="selectedWeapon.weaponName" 
              @error="handleImageError" 
            />
          </div>
          
          <!-- 武器属性详情：显示武器的各项数值属性 -->
          <div class="weapon-stats-detail">
            <!-- 攻击力属性行 -->
            <div class="stat-row">
              <span class="stat-label">攻击力</span>
              <span class="stat-value">{{ selectedWeapon.attack }}</span>
            </div>
            <!-- 暴击率属性行 -->
            <div class="stat-row">
              <span class="stat-label">暴击率</span>
              <span class="stat-value">{{ selectedWeapon.critRate }}%</span>
            </div>
            <!-- 适用英雄属性行：仅当英雄名称存在时显示 -->
            <div class="stat-row" v-if="getHeroName(selectedWeapon.heroId)">
              <span class="stat-label">适用英雄</span>
              <span class="stat-value">{{ getHeroName(selectedWeapon.heroId) }}</span>
            </div>
          </div>
          
          <!-- 武器背景描述：仅当背景信息存在时显示 -->
          <div class="weapon-description" v-if="selectedWeapon.weaponBackground">
            <h4>武器背景</h4>
            <p>{{ selectedWeapon.weaponBackground }}</p>
          </div>
          
          <!-- 武器技能描述：仅当技能信息存在时显示 -->
          <div class="weapon-skill" v-if="selectedWeapon.weaponSkill">
            <h4>武器技能</h4>
            <p>{{ selectedWeapon.weaponSkill }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 武器展示页面组件
 * 功能：展示武器列表，支持搜索筛选，查看武器详情
 * 作者：系统自动生成
 * 更新时间：2024年
 */

/* ===== 依赖导入部分 ===== */
// Vue 3 组合式API核心函数导入
import { ref, computed, onMounted } from 'vue'
// API接口导入：武器和英雄数据接口
import { weaponApi } from '../api/weapon.js'
import { heroApi } from '../api/hero.js'

/* ===== 响应式数据定义 ===== */
/**
 * 武器数据相关
 * weapons: 所有武器数据数组
 * heroList: 英雄列表数据，用于武器关联显示
 */
const weapons = ref([])
const heroList = ref([])

/**
 * 搜索和筛选相关
 * searchQuery: 搜索关键词，用于武器名称搜索
 * selectedHero: 选中的英雄ID，用于筛选该英雄的武器
 */
const searchQuery = ref('')
const selectedHero = ref('')

/**
 * 界面状态相关
 * selectedWeapon: 当前选中的武器对象，用于显示详情侧边栏
 */
const selectedWeapon = ref(null)

/**
 * 操作状态相关
 * loading: 数据加载状态，控制加载动画显示
 * error: 错误信息，当数据加载失败时显示
 */
const loading = ref(true)
const error = ref(null)

/* ===== 计算属性定义 ===== */
/**
 * 过滤后的武器列表
 * 根据搜索条件和英雄筛选条件动态筛选武器数据
 * @returns {Array} 符合条件的武器数组
 */
const filteredWeapons = computed(() => {
  let filtered = weapons.value
  
  // 按武器名称搜索过滤：不区分大小写的模糊匹配
  if (searchQuery.value) {
    filtered = filtered.filter(weapon => 
      weapon.weaponName.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  // 按英雄筛选：筛选指定英雄的武器
  if (selectedHero.value) {
    filtered = filtered.filter(weapon => weapon.heroId === selectedHero.value)
  }
  
  return filtered
})

/* ===== 数据加载方法 ===== */
/**
 * 加载武器列表数据
 * 从后端API获取所有武器信息并处理响应
 * @async
 * @function loadWeapons
 */
const loadWeapons = async () => {
  try {
    const response = await weaponApi.getAllWeapons()
    if (response.code === 0) {
      weapons.value = response.data || []
    } else {
      error.value = response.message || '获取武器数据失败'
    }
  } catch (err) {
    console.error('加载武器列表失败:', err)
    error.value = '网络错误，请稍后重试'
  }
}

/**
 * 加载英雄列表数据
 * 从后端API获取所有英雄信息，用于武器关联显示和筛选
 * @async
 * @function loadHeroes
 */
const loadHeroes = async () => {
  try {
    const response = await heroApi.getAllHeroes()
    if (response.code === 0) {
      heroList.value = response.data || []
    } else {
      console.error('加载英雄列表失败:', response.message)
    }
  } catch (err) {
    console.error('加载英雄列表失败:', err)
  }
}

/* ===== 工具方法 ===== */
/**
 * 根据英雄ID获取英雄名称
 * 用于在武器列表中显示关联英雄的名称
 * @param {string|number} heroId - 英雄ID
 * @returns {string} 英雄名称，如果未找到则返回空字符串
 */
const getHeroName = (heroId) => {
  const hero = heroList.value.find(h => h.id === heroId)
  return hero ? hero.heroName : ''
}

/**
 * 选择武器
 * 设置当前选中的武器，用于显示详情侧边栏
 * @param {Object} weapon - 武器对象
 */
const selectWeapon = (weapon) => {
  selectedWeapon.value = weapon
}

/**
 * 关闭武器详情
 * 清空选中的武器，隐藏详情侧边栏
 */
const closeDetail = () => {
  selectedWeapon.value = null
}

/* ===== 事件处理方法 ===== */
/**
 * 搜索处理方法
 * 处理用户搜索输入，实际搜索逻辑在filteredWeapons计算属性中实现
 * 这里可以添加防抖等优化逻辑
 */
const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
  // 可以在这里添加搜索统计、防抖等逻辑
}

/**
 * 英雄筛选处理方法
 * 处理英雄筛选下拉框的变化事件
 * 实际筛选逻辑在filteredWeapons计算属性中实现
 */
const handleHeroFilter = () => {
  // 筛选逻辑已在计算属性中处理
  // 可以在这里添加筛选统计等逻辑
}

/**
 * 图片加载错误处理
 * 当武器图片加载失败时显示默认图片
 * @param {Event} event - 图片错误事件对象
 */
const handleImageError = (event) => {
  event.target.src = '/default-weapon.png'
}

/* ===== 数据初始化方法 ===== */
/**
 * 统一数据加载入口
 * 同时加载武器和英雄数据，供重试按钮和刷新按钮使用
 * @async
 * @function loadData
 */
const loadData = async () => {
  loading.value = true
  error.value = null
  try {
    // 并行加载武器和英雄数据，提高加载效率
    await Promise.all([loadWeapons(), loadHeroes()])
  } catch (e) {
    console.error('加载数据失败:', e)
    error.value = '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

/* ===== 生命周期钩子 ===== */
/**
 * 组件挂载时的数据初始化
 * 页面加载完成后自动获取武器和英雄数据
 */
onMounted(async () => {
  await loadData()
})
</script>

<style scoped>
/* 武器页面主容器样式 */
.weapon-page {
  min-height: calc(100vh - 70px);
  padding: 2rem;
  background: rgba(0, 0, 0, 0.7);
}

/* 页面头部容器样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 头部左侧内容容器样式 */
.header-left {    
  flex: 1;
} 

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
}

.page-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 页面操作按钮容器 */
.header-actions { 
  display: flex;
  gap: 1rem;
  align-items: center;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.refresh-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.refresh-btn:disabled .refresh-icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 加载状态容器样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #fff;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #4ecdc4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态容器样式 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #ff6b6b;
  text-align: center;
}

.retry-btn {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.retry-btn:hover {
  background: #ff5252;
}

.search-section {
  margin-bottom: 2rem;
}

.search-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.search-input-wrapper {
  position: relative;
  min-width: 300px;
}

.search-input { 
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-icon {  
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.hero-filter-wrapper {
  min-width: 200px;
}

.hero-filter {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-filter:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.hero-filter option {
  background: #333;
  color: #fff;
}

/* 武器容器样式 */
.weapons-container {
  margin-top: 2rem;
}

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
}

.weapon-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.weapon-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.weapon-card.active {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.1);
}

.weapon-image {
  width: 100%;
  height: 200px;
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.weapon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.weapon-card:hover .weapon-image img {
  transform: scale(1.05);
}

.weapon-info {
  color: #fff;
}

.weapon-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #4ecdc4;
}

.weapon-hero {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero-label {
  color: rgba(255, 255, 255, 0.6);
}

.hero-name {
  color: #ff6b6b;
  font-weight: 500;
}

/* 空状态样式 */
.no-weapons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.no-weapons-icon {
  margin-bottom: 2rem;
  opacity: 0.5;
}

.no-weapons h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.no-weapons p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

/* 武器详情侧边栏样式 */
.weapon-detail-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.weapon-detail-sidebar.active {
  right: 0;
}

.weapon-detail {
  padding: 2rem;
  color: #fff;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-header h2 {
  font-size: 1.5rem;
  color: #4ecdc4;
  margin: 0;
}

.close-detail {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-detail:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.weapon-image-large {
  width: 100%;
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.weapon-image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weapon-stats-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.stat-value {
  color: #4ecdc4;
  font-weight: bold;
  font-size: 1rem;
}

.weapon-description,
.weapon-skill {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.weapon-description h4,
.weapon-skill h4 {
  color: #ff6b6b;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.weapon-description p,
.weapon-skill p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weapon-page {
    padding: 1rem;
  }
  
  .page-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-wrapper,
  .hero-filter-wrapper {
    min-width: auto;
  }
  
  .weapons-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .weapon-detail-sidebar {
    width: 100%;
    right: -100%;
  }
  
  .weapon-detail-sidebar.active {
    right: 0;
  }
  
  .weapon-detail {
    padding: 1.5rem;
  }
}
</style>